<template>
  <div class="app-container">
    <div class="app-title">
      <span>身份证核对审核</span>
    </div>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="width:800px; height:15px; margin-top:-17px "
          >
            <el-radio-button
              label="1"
              name="report"
            >未审核</el-radio-button>
            <el-radio-button
              label="2"
              name="didNotReport"
            >已审核</el-radio-button>
            <el-radio-button
              label="auditAll"
              name="didNotReport"
            >全部</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!-- 图标 -->
      <div>
        <div style="margin-left:200px; position:absolute; margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="allimgSrc"
          >
        </div>

        <div style="margin-left:25px; position:absolute;  margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="Untreatedimg"
          >
        </div>

      </div>
      <div style="margin-left:110px; position:absolute;  margin-top:3px">
        <img
          style="width:16px; height:16px;"
          :src="Processedimg"
        >
      </div>
      <div class="filter-container">
        <div class="longbuton">
          <el-col
            style="text-align:right;margin-top: -3px;"
            :span="16"
          >
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="Query"
            >
              查询
            </el-button>
            <el-button
              v-if="activeName == '1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="auditPassLoading"
              @click="auditPass"
            >
              审核
            </el-button>
            <el-button
              v-if="activeName == '1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              :loading="sendBackLoading"
              type="primary"
              @click="sendBack"
            >
              退回
            </el-button>
            <el-button
              v-if="activeName == '2'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="undoAuditLoading"
              @click="undoAudit"
            >
              撤销审核
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <IDCardCheckAudiChildren
      :key="timer"
      ref="chil"
      :tab-pane="activeName"
      @auditPassCallBack="auditPassCallBack()"
      @sendBackCallBack="sendBackCallBack()"
      @undoAuditCallBack="undoAuditCallBack()"
    />
  </div>
</template>

<script>
import IDCardCheckAudiChildren from '@/views/personInfoMaintenance/IDCardCheck/children/IDCardCheckAudiChildren'
export default {
  name: 'IDCardCheckAudit',
  components: { IDCardCheckAudiChildren },
  data() {
    return {
      timer: '',
      listLoading: true,
      auditPassLoading: false,
      sendBackLoading: false,
      undoAuditLoading: false,
      dialogEditFormVisible: false,
      activeName: '1',
      auditAll: true,
      noAudit: false,
      isAudit: false,
      allimgSrc: require('@/assets/images/all.png'),
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png')
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'auditAll') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.svg')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      }
    }
  },
  created() {},
  methods: {
    // 查询
    Query() {
      this.$refs.chil.query()
    },

    auditPass() {
      this.auditPassLoading = true
      this.$refs.chil.auditPass()
    },
    auditPassCallBack() {
      this.auditPassLoading = false
    },
    sendBack() {
      this.sendBackLoading = true
      this.$refs.chil.sendBack()
    },
    sendBackCallBack() {
      this.sendBackLoading = false
    },
    undoAudit() {
      this.undoAuditLoading = true
      this.$refs.chil.undoAudit()
    },
    undoAuditCallBack() {
      this.undoAuditLoading = false
    },
    childrenLoad(tab) {
      if (tab.name === 'auditAll') {
        this.auditAll = true
        this.noAudit = false
        this.isAudit = false
      } else if (tab.name === 'noAudit') {
        this.auditAll = false
        this.noAudit = true
        this.isAudit = false
      } else if (tab.name === 'isAudit') {
        this.auditAll = false
        this.noAudit = false
        this.isAudit = true
      }
      this.timer = new Date().getTime()

    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/border.scss"; /*引入公共样式*/

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.longbuton {
  .el-col-16 {
    width: 72%;
    margin-left: 25px;
  }
}
</style>
